<template>
    <div id="class">
        <!-- 无置顶课程 -->
        <div class="non-stick" v-show="havaNoTop">
            <div class="manage">
                <a style="color: #3B3D45">全部课程</a>
                <div>
                    <el-button class="add-course" type="primary" size="mini" @click="joinCourseVisible = true">＋&nbsp;加入课程</el-button>
                </div>
            </div>
            <ul class="class-table">
                <li style="margin-right: 23px" v-for="(course) in courses" v-bind:key="course.cid">
                    <div class="top" @click="jumpToCourse(course)">
                        <div  class="course-name" v-if="course">{{course.courseName}}</div>
                        <div class="course-class">{{course.courseClass}}</div>
                        <div class="add_code">
                            <label>加课码：{{course.courseCode}}</label>
                        </div>
                        <span class="time">
                            {{course.courseYear}}<br/>
                            {{course.courseTerm}}
                        </span>
                    </div>
                    <div class="bottom">
                        <ul>
                          <div style="color: #A0A0A0">近期作业</div>

                          <li class="assignment-box" v-if="course.assignmentList != null">
                           <div style="display: flex;justify-content: space-between" v-for="assignment in course.assignmentList.slice(0,2)" :key="assignment.aid">
                             <div class="assignment-name" style="margin-bottom: 20px">{{assignment.assignmentName}}</div>
                             <div >{{assignment.assignmentDesc}}</div>
                           </div>
                          </li>
                          <div style="margin-top: 20px; font-size: 20px" v-else>
                            暂无作业
                          </div>

                        </ul>
                        <div class="foot">
                            <el-avatar style="width: 30px; height: 30px; float: left; margin-right: 10px;color:#000;font-size: 10px;display: flex;justify-content: center;align-items: center" src="">老师</el-avatar>
                            <label style="float:left; padding-top: 3px;font-size: 20px" >{{course.name}}</label>
                            <label style="font-size: 12px; float: right; margin-top: 3px">
                                <a @click="beTop(course.cid)" style="margin-right: 10px; color: #A0A0A0">置顶</a>
                                <el-dropdown trigger="click" @command="more">
                                    <a style="color: #2C58AB">更多<i class="el-icon-s-operation" /></a>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="composeValue(course ,1)"><a>退课</a></el-dropdown-item>
                                        <el-dropdown-item :command="composeValue(course ,2)">归档</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="top top2" />
                    <div class="bottom" style="margin: 15px 0 0; padding: 0 16px" @click="joinCourseVisible = true">
                        <a style="line-height: 141px;font-size: 30px">
                            +加入课程
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 有置顶课程 -->
        <div class="stick" v-show="!havaNoTop">
            <div class="manage">
                <a style="color: #3B3D45">置顶课程</a>
                <div>
                    <a><i class="el-icon-sort"></i>&nbsp;&nbsp;课程排序</a>
                    <a @click="archiveManageVisible = true"><i class="el-icon-receiving"></i>&nbsp;&nbsp;归档管理</a>
                    <el-button class="add-course" type="primary" size="mini" @click="joinCourseVisible = true">＋&nbsp;加入课程</el-button>
                </div>
            </div>
            <ul class="class-table">
                <li style="margin-right: 23px" v-for="(course, index) in topedCourses" v-bind:key="course.cid">
                    <div class="top">
                        <div @click="jumpToCourse(course)" class="course-name" v-if="course">{{course.courseName}}</div>
                        <div class="course-class">{{course.courseClass}}</div>
                        <div class="add_code">
                            <label>加课码：{{course.courseCode}}</label>
                        </div>
                        <span class="time">
                            {{course.courseYear}}<br/>
                            {{course.courseTerm}}
                        </span>
                    </div>
                    <div class="bottom">
                        <ul>
                          <div style="color: #A0A0A0">近期作业</div>

                          <li class="assignment-box" v-if="course.assignmentList.length > 0">
                            <div style="display: flex;justify-content: space-between" v-for="assignment in course.assignmentList.slice(0,2)" :key="assignment.aid">
                              <div class="assignment-name" style="margin-bottom: 20px">{{assignment.assignmentName}}</div>
                              <div >{{assignment.assignmentDesc}}</div>
                            </div>
                          </li>
                          <div style="margin-top: 20px; font-size: 20px" v-else>
                            暂无作业
                          </div>

                        </ul>
                        <div class="foot">
                            <el-avatar style="width: 24px; height: 24px; float: left; margin-right: 10px;" src=""></el-avatar>
                            <label style="float:left; padding-top: 3px;" v-if="topedTeachers[index]">{{topedTeachers[index].name}}</label>
                            <label style="font-size: 12px; float: right; margin-top: 3px">
                                <a @click="cancelTop(course.cid)" style="margin-right: 10px; color: #A0A0A0">取消置顶</a>
                                <el-dropdown trigger="click" @command="more">
                                    <a style="color: #2C58AB">更多<i class="el-icon-s-operation" /></a>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="composeValue(course ,1)"><a>退课</a></el-dropdown-item>
                                        <el-dropdown-item :command="composeValue(course ,2)">归档</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </label>
                        </div>
                    </div>
                </li>
            </ul>
            <div class="manage">
                <a style="color: #3B3D45">其他课程</a>
            </div>
            <ul class="class-table">
                <li style="margin-right: 23px" v-for="(course, index) in otherCourses" v-bind:key="course.cid">
                    <div class="top">
                        <div @click="jumpToCourse(course)" class="course-name" v-if="course">{{course.courseName}}</div>
                        <div class="course-class">{{course.courseClass}}</div>
                        <div class="add_code">
                            <label>加课码：{{course.courseCode}}</label>
                        </div>
                        <span class="time">
                            {{course.courseYear}}<br/>
                            {{course.courseTerm}}
                        </span>
                    </div>
                    <div class="bottom">
                        <ul>
                          <div style="color: #A0A0A0">近期作业</div>

                          <li class="assignment-box" v-if="course.assignmentList.length > 0">
                            <div style="display: flex;justify-content: space-between" v-for="assignment in course.assignmentList.slice(0,2)" :key="assignment.aid">
                              <div class="assignment-name" style="margin-bottom: 20px">{{assignment.assignmentName}}</div>
                              <div >{{assignment.assignmentDesc}}</div>
                            </div>
                          </li>
                          <div style="margin-top: 20px; font-size: 20px" v-else>
                            暂无作业
                          </div>
                        </ul>
                        <div class="foot">
                            <el-avatar style="width: 24px; height: 24px; float: left; margin-right: 10px;" src=""></el-avatar>
                            <label style="float:left; padding-top: 3px;" v-if="otherTeachers[index]">{{otherTeachers[index].name}}</label>
                            <label style="font-size: 12px; float: right; margin-top: 3px">
                                <a @click="beTop(course.cId)" style="margin-right: 10px; color: #A0A0A0">置顶</a>
                                <el-dropdown trigger="click" @command="more">
                                    <a style="color: #2C58AB">更多<i class="el-icon-s-operation" /></a>
                                    <el-dropdown-menu slot="dropdown">
                                        <el-dropdown-item :command="composeValue(course ,1)"><a>退课</a></el-dropdown-item>
                                        <el-dropdown-item :command="composeValue(course ,2)">归档</el-dropdown-item>
                                    </el-dropdown-menu>
                                </el-dropdown>
                            </label>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="top top2" />
                    <div class="bottom" style="margin: 15px 0 0; padding: 0 16px" @click="joinCourseVisible = true">
                        <a style="line-height: 141px">
                            +加入课程
                        </a>
                    </div>
                </li>
            </ul>
        </div>
        <!-- 退课提示 -->
        <el-dialog
            :visible.sync="dropCourseVisible"
            style="text-align: left; margin-top: 100px"
            width="25%"
            :before-close="handleClose">
            <div>
                <div style="padding-left: 26px; padding-right: 26px;
                            padding-top: 10px; line-height: 52px;
                            color: #a9a9a9; font-size: 18px;" v-if="this.currentCourse">
                    确定要退课“{{this.currentCourse.courseName}}”么？
                </div>
                <div style="padding: 5px 26px 10px;">
                    <p style="line-height: 32px;
                        color: #2d2d2d; font-size: 14px;">
                        您的这个课程的任何信息或评论将被永久删除<br />
                        <span style="color: red">警告：此操作无法撤消</span></p>
                        <p style="color: blue">
                            提醒：已用课程数包含了“删除课程数”</p>
                </div>
            </div>
            <span slot="footer">
                <el-button @click="dropCourseVisible = false" style="margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="dropCourse(currentCourse.cid)">退 课</el-button>
            </span>
        </el-dialog>
        <!-- 归档提示 -->
        <el-dialog
            :visible.sync="archiveVisible"
            style="text-align: left; margin-top: 100px"
            width="25%"
            :before-close="handleClose">
            <div>
                <div style="padding-left: 26px; padding-right: 26px;
                            padding-top: 10px; line-height: 52px;
                            color: #a9a9a9; font-size: 18px">
                    要归档此课程么？
                </div>
                <div style="padding: 5px 26px 10px">
                  <p style="line-height: 32px; color: #2d2d2d; font-size: 14px;">您可以在“课堂”-“归档管理”中查看此课程</p>
                </div>
            </div>
            <span slot="footer">
                <el-button @click="archiveVisible = false" style="margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="beArchive(currentCourse.cId)">归档自己</el-button>
            </span>
        </el-dialog>
        <!-- 加入课程 -->
        <el-dialog
            :visible.sync="joinCourseVisible"
            style="text-align: left; margin-top: 100px"
            width="40%"
            :before-close="handleClose">
            <div style="color: #a9a9a9; font-size: 18px;
                border-bottom: 1px solid #ececec; height: 66px;
                line-height: 66px; padding-left: 28px">
                加入课程</div>
            <div style="padding: 20px 25px 0">
                <input style="padding-top: 9px; padding-bottom: 9px;
                    color: #2d2d2d; font-size: 14px;
                    width: 100%; border: 0;
                    height: 14px; line-height: 14px;
                    border-bottom: 1px solid #ececec;outline: none"
                    type="text" placeholder="请输入课程加课验证码" v-model="add_class_code">
            </div>
            <span slot="footer">
                <el-button @click="joinCourseVisible = false" style="margin-right: 50px">取 消</el-button>
                <el-button type="primary" @click="joinCourse()" style="margin-right: 60px">加 入</el-button>
            </span>
        </el-dialog>
        <!-- 归档管理 -->
        <el-dialog
            title="归档管理"
            :visible.sync="archiveManageVisible"
            style="text-align: left; margin-top: 100px"
            width="810px"
            :before-close="handleClose"
            center>
            <div style="padding-left: 70px; padding-right: 70px; margin-top: -25px">
                <ul style="left: -95px; position: relative;
                    padding: 30px 70px; width: 670px">
                    <li style="display: inline-block; width: 300px; list-style: none; margin: 0 15px 30px;
                        box-shadow: 0 0.1rem 0.2rem rgba(0,0,0,.12), 0 0 0.1rem rgba(0,0,0,.12); position: relative;
                        box-sizing: border-box; background-clip: padding-box; background: url(../../../static/student/archiveBg/1.jpg)"
                        v-for="(course, index) in archivedCourses" v-bind:key="course.cId">
                        <div style=" width: 268px;  clear: both; position: relative;
                            height: 72px;  padding: 24px 16px 14px;">
                            <strong style="font-size: 20px; font-weight: lighter;
                                color: #fff; height: 26px; line-height: 26px;">
                                <a style="color: #fff; overflow: hidden; width: 240px; font-size: 20px">
                                    {{course.name}}</a></strong>
                            <el-dropdown trigger="click" @command="operation" style="position: absolute; top: 36px; right: 15px">
                                <a style=" display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center;
                                    background: url(../../../static/student/operation.png) center center no-repeat"></a>
                                <el-dropdown-menu slot="dropdown">
                                    <el-dropdown-item :command="composeValue(course ,1)"><a>恢复</a></el-dropdown-item>
                                    <el-dropdown-item :command="composeValue(course ,2)">退课</el-dropdown-item>
                                </el-dropdown-menu>
                            </el-dropdown>
                            <p style="color: #fff; width: 264px; height: 42px; overflow: hidden;
                                line-height: 20px; padding-top: 14px; font-size: 12px;"
                                v-if="archivedTeachers[index]">角色：学生 &nbsp;&nbsp;&nbsp;&nbsp;
                                老师：{{archivedTeachers[index].name}}</p>
                        </div>
                    </li>
                </ul>
            </div>
        </el-dialog>
        <!-- 恢复归档提醒 -->
      <el-dialog
            :visible.sync="archiveTipVisible"
            style="text-align: left; margin-top: 100px"
            width="20%"
            :before-close="handleClose"
            center>
            <div style="padding-left: 26px; padding-right: 26px; padding-top: 10px;
                line-height: 52px; color: #a9a9a9; font-size: 18px">
                要恢复此课程么？</div>
            <div style="padding: 5px 26px 10px">
                <p style="line-height: 32px; color: #2d2d2d; font-size: 14px">
                    您和您的学生将可以重新在此课程中互动。<br> 此课程会在课堂页上显示。</p>
            </div>
            <span slot="footer">
                <el-button @click="archiveTipVisible = false" style="margin-left: 150px; margin-right: 10px">取 消</el-button>
                <el-button type="primary" @click="cancelArchive(currentCourse.cId)">恢 复</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { getClassInfo, joinCourseByCode, getClassAndAssignment, dropClass, updateStudentTop, updateStudentNoTop, getStudentCourseTop, getStudentOtherCourseTop } from '../../api/require'

export default {
  data () {
    return {
      sid: '',
      userName: '',
      student: {},
      currentCourse: {},
      courses: [],
      assignmentList: [],
      otherCourses: [],
      topedCourses: [],
      archivedCourses: [],
      otherTeachers: [],
      topedTeachers: [],
      archivedTeachers: [],
      havaNoTop: true,
      dropCourseVisible: false,
      archiveVisible: false,
      joinCourseVisible: false,
      archiveManageVisible: false,
      archiveTipVisible: false,
      add_class_code: ''
      // assignmentList: []
    }
  },
  created () {
    console.log('............', this.sid)
    this.refresh()
  },
  methods: {
    refresh () {
      getClassInfo(this.sid).then(res => {
        console.log(res)
        this.courses = res.data.obj
        console.log(this.courses)
        // this.courses.assignmentList = this.courses.assignmentList.slice(0, 1)
      }).catch(e => {
        console.log(e)
      })
      getClassAndAssignment(this.sid).then(res => {
        console.log(res)
        console.log('.......', res.data.obj)
        // this.courses
        this.assignmentList = res.data.obj
        if (this.assignmentList.length === this.courses.length) {
          this.courses = this.assignmentList
        } else {
          for (let i = 0; i < this.courses.length; i++) {
            for (let j = 0; j < this.assignmentList.length; j++) {
              if (this.courses[i].cid === this.assignmentList[j].cid) {
                this.courses[i].assignmentList = this.assignmentList[j].assignmentList
              }
            }
          }
        }
      }).catch(e => {
        console.log(e)
      })
    },
    beTop (id) {
      this.$confirm('你确定要置顶吗？').then(res => {
        updateStudentTop(id, this.sid).then(res => {
          if (res.data.code === 200) {
            getStudentCourseTop(this.sid).then(res => {
              console.log('置顶课程', res)
              this.topedCourses = res.data.obj
              // this.otherCourses = this.courses-this.topedCourses
              if (this.topedCourses.length !== 0) {
                this.havaNoTop = false
              }
            })
            this.$message.success('置顶成功！')
            getStudentOtherCourseTop(this.sid).then(res => {
              console.log('otherCourses', res)
              this.otherCourses = res.data.obj
            })
          }
        })

        console.log('......................', res)
      })
    },
    cancelTop (id) {
      this.$confirm('你确定要取消置顶吗？').then(res => {
        updateStudentNoTop(id, this.sid).then(res => {
          if (res.data.code === 200) {
            getStudentCourseTop(this.sid).then(res => {
              this.topedCourses = res.data.obj
              if (this.topedCourses.length === 0) {
                this.havaNoTop = true
              }
            })
            this.$message.success('取消置顶成功！')
          }
        })
        console.log('......................', res)
      })
    },
    beArchive (id) {
      // this.archiveVisible = false
      // this.$axios.post('api/student/beArchive?sId=' + this.student.sId + '&cId=' + id)
      //   .then(() => {
      //     this.$message('归档成功！')
      //     this.reload()
      //   })
    },
    cancelArchive (id) {
      // this.$axios.post('api/student/cancelArchive?sId=' + this.student.sId + '&cId=' + id)
      //   .then(() => {
      //     this.$message('取消归档成功！')
      //     this.reload()
      //   })
    },
    joinCourse () {
      joinCourseByCode(this.sid, this.add_class_code).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.$message({
            showClose: true,
            message: '加课成功',
            type: 'success'
          })
          /* 重新加载课程 */
          getClassInfo(this.sid).then(res => {
            console.log(res)
            this.courses = res.data.obj
            console.log(this.courses)
            // this.courses.assignmentList = this.courses.assignmentList.slice(0, 1)
          }).catch(e => {
            console.log(e)
          })
        } else {
          this.joinCourseVisible = false
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          })
        }
        this.joinCourseVisible = false
      }).catch(err => {
        console.log(err)
        this.$message({
          showClose: true,
          message: '失败',
          type: 'error'
        })
      })
    },
    dropCourse (id) {
      console.log('退课课程号', id)
      dropClass(this.sid, id).then(res => {
        console.log(res)
        if (res.data.code === 200) {
          this.$message({
            showClose: true,
            message: '退课成功',
            type: 'success'
          })
          this.refresh()
        } else {
          this.$message({
            showClose: true,
            message: res.data.message,
            type: 'error'
          })
        }
      }).catch(e => {
        this.$message({
          showClose: true,
          message: '退课失败',
          type: 'error'
        })
      })
      this.dropCourseVisible = false
      // this.$axios.post('api/student/dropCourse?sId=' + this.student.sId + '&cId=' + id)
      //   .then(res => {
      //     this.$message('退课成功！')
      //     this.reload()
      //   })
    },
    composeValue (course, row) {
      return {
        course: course,
        row: row
      }
    },
    more (command) {
      console.log(command.row)
      console.log(command.row === 1)
      if (command.row === 1) {
        this.dropCourseVisible = true
        this.currentCourse = command.course
      } else {
        this.archiveVisible = true
        this.currentCourse = command.course
      }
    },
    operation (command) {
      if (command.row === 1) {
        this.archiveTipVisible = true
        this.currentCourse = command.course
      } else {
        this.dropCourseVisible = true
        this.currentCourse = command.course
      }
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },

    jumpToCourse (course) {
      console.log(this.sid)
      console.log(course.cid)
      this.$router.push({ path: '/mainStudent/course', query: { sid: this.sid, cid: course.cid } })
    },
    getCookie (name) { // 获取指定名称的cookie值
      //   // (^| )name=([^;]*)(;|$),match[0]为与整个正则表达式匹配的字符串，match[i]为正则表达式捕获数组相匹配的数组；
      //   var arr = document.cookie.match(new RegExp('(^| )' + name + '=([^;]*)(;|$)'))
      //   if (arr != null) {
      //     // console.log(arr);
      //     return unescape(arr[2])
      //   }
      //   return null
      // }
    }

  },
  mounted () {
    this.sid = sessionStorage.getItem('sid')
    getStudentCourseTop(this.sid).then(res => {
      console.log('res------', res)
      if (res.data.obj.length !== 0) {
        this.havaNoTop = false
        this.topedCourses = res.data.obj
        getStudentOtherCourseTop(this.sid).then(res => {
          console.log('其他课程', res)
          this.otherCourses = res.data.obj
        })
      } else {
        this.havaNoTop = true
        this.refresh()
        // getClassInfo(this.sid).then(res => {
        //   console.log(res)
        //   this.courses = res.data.obj
        //   console.log(this.courses)
        //   // this.courses.assignmentList = this.courses.assignmentList.slice(0, 1)
        // }).catch(e => {
        //   console.log(e)
        // })
      }
    })
  }
}
</script>
<style scoped>

* {
    font-size: 14px;
}
a {
    text-decoration: none;
}
#mainBody {
  height: 100%;
  width: 100%;
}
.non-stick, .stick {
    height: 100%;
    padding: 0 4% 0;
}
.manage {
    position: relative;
    box-shadow: 0 1px 0 0 rgba(226,230,237,1);
    line-height: 60px;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: left;
    clear: left;
}
.manage a {
    color: #78787A;
}
.manage div {
    float: right;
}
.manage div a {
    margin-left: 20px;
}
.class-table {
    flex-wrap: wrap;
    justify-content: space-between;
}
.class-table li {
    width: 300px;
    list-style: none;
    background: #fff;
    position: relative;
    border: 1px solid #E2E6ED;
    border-radius: 8px;
    margin-block-start: 1em;
    margin-block-end: 1em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    float: left;
}
.course-name {
    color: #fff;
  padding: 10px 0;
    font-size: 30px;
    line-height: 10px 0;
    /*float: left;*/
    margin-left: 15px;
}
.course-class {
    font-size: 16px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    /*color: rgb(74, 144, 255);*/
  color: #fff;
  /*  display: flex;*/
  /*justify-content: left;*/
    line-height: 28px;
    margin-left: 15px;
  margin-top: 10px;
    /*overflow: hidden;*/

}
.top {
    clear: both;
    height: 150px;
    padding-top: 18px;
    padding-bottom: 14px;
    border-radius: 10px;
    background: rgb(135, 148, 150);
  background: url('../../assets/images/create-course.png') no-repeat;
  background-size: cover;

}
.top2{
  background: url('../../assets/images/create-course2.png') no-repeat;
  background-size: cover;
}
.add_code {
    width: 128px;
    height: 22px;
    background: rgba(31, 43, 150, 0.2);
    border-radius: 2px;
    font-size: 12px;
    font-family: PingFang-SC-Medium;
    font-weight: 500;
    /*color: rgb(57, 31, 255);*/
  color: #fff;
    float: left;
    line-height: 22px;
    text-align: center;
    margin-left: 18px;
    padding-left: 2px;
    padding-right: 4px;
    margin-top: 20px;
}
.add_code label {
    float: left;
    cursor: pointer;
}
.time {
    float: right;
    text-align: left;
    font-size: 14px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    /*color: rgb(105, 132, 46);*/
  color: #fff;
    padding-right: 14px;
    height: 30px;
  margin-top: 10px;
}
.bottom {
    background: #fff;
    clear: both;
    height: 141px;
    border-radius: 0 0 8px 8px;
}
.bottom ul {
    margin-top: 15px;
    padding: 0 16px;
    height: 105px;

}
.bottom ul .assignment-box{
  width: 100%;
  padding: 10px 0;
  margin: 0;
  border: none;
  font-size: 18px;
  font-weight: bold;
  /*display: flex;*/

  /*justify-content: space-between;*/
}
.bottom .foot {
    position: absolute;
    bottom: 3px;
    left: 16px;
    right: 16px;

}
.add-course {
    width: 100px;
    height: 36px;
    text-align: center;
    margin-left: 20px;
    background-color: #32baf0;
}
.add-course p {
    font-size: 14px;
    color: rgba(255,255,255,1);
    line-height: 18px;
    margin-left: -5px;
}
</style>
